<html>
<head>
<script type="text/javascript" src="/scripts/dom.js"></script>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript">

function loadGames() {
	ajaxRequest("listgames.jsp", function(json) {
		listGames(json);
	});
}
function clearGames() {
	ajaxRequest("cleargames.jsp", function(json) {
		listGames(json);
	});
}
function createGame() {
	var id = document.getElementById("id").value;
	var name = document.getElementById("name").value;
	var state = document.getElementById("state").value;
	var players = document.getElementById("players").value;

	ajaxRequest("creategame.jsp?id="+ id +"&name="+ name, function(json) {
//		listGames(json);
		loadGames();
	});
}
function deleteGame(id) {
	ajaxRequest("deletegame.jsp?id="+ id, function(json) {
		loadGames();
	});
}
function joinGame(id) {
	ajaxRequest("joingame.jsp?id="+ id, function(json) {
		loadGames();
	});
}
function leaveGame(id) {
	ajaxRequest("leavegame.jsp?id="+ id, function(json) {
		loadGames();
	});
}
function startGame(id) {
	ajaxRequest("startgame.jsp?id="+ id, function(json) {
		loadGames();
	});
}
function endGame(id) {
	ajaxRequest("endgame.jsp?id="+ id, function(json) {
		loadGames();
	});
}

function listGames(games) {
	removeAllChildrenOfId("games");
	for (var i = 0; i < games.length; ++i) {
		var game = games[i];
		appendChildToId("games", buildGameRow(game));
	}
}
function buildGameRow(game) {
	var gameRow = document.createElement("tr");
	gameRow.appendChild(buildTableCell(buildTextNode(game.id)));
	gameRow.appendChild(buildTableCell(buildTextNode(game.name)));
	gameRow.appendChild(buildTableCell(buildTextNode(buildDateText(game.start))));
	gameRow.appendChild(buildTableCell(buildTextNode(buildDateText(game.end))));
	gameRow.appendChild(buildTableCell(buildTextNode(game.state.name)));
	gameRow.appendChild(buildTableCell(buildTextNode(buildPlayerList(game.players))));

	gameRow.appendChild(buildTableCell(buildButton("Delete", function(event) { deleteGame(game.id); })));
	gameRow.appendChild(buildTableCell(buildButton("Join", function(event) { joinGame(game.id); })));
	gameRow.appendChild(buildTableCell(buildButton("Leave", function(event) { leaveGame(game.id); })));
	gameRow.appendChild(buildTableCell(buildButton("Start", function(event) { startGame(game.id); })));
	gameRow.appendChild(buildTableCell(buildButton("End", function(event) { endGame(game.id); })));
	return gameRow;
}
function buildPlayerList(players) {
	var list = ".";
	for (var i = 0; i < players.length; ++i) {
		var player = players[i];
		list += player;
		if (i < players.length -1) list += ", ";
	}
	return list;
}
function buildDateText(date) {
	var text = "";
	if (date == null) return text;

	text += (1900+date.year);
	text += "/"+ (1+date.month);
	text += "/"+ date.date;
	return text;
}

window.onload = function() { loadGames(); }
</script>
</head>
<body>
<h1>Games Info</h1>
<table border>
<tr>
<th>Id</th>
<th>Name</th>
<th>Start</th>
<th>End</th>
<th>State</th>
<th>Players</th>
<th colspan=5>Actions</th>
</tr>
<tbody id="games">
</tbody>
<tfoot>
<tr>
<td><input id="id" /></td>
<td><input id="name" /></td>
<td><input id="state" /></td>
<td><input id="players" /></td>
</tr>
</tfoot>
</table>

<button onclick="loadGames()"/>Get Games</button>
<button onclick="clearGames()"/>Clear Games</button>
<button onclick="createGame()"/>Create Game</button>
<br>
<a href="creategame.jsp">Create Game</a>
<a href="listgames.jsp">List Games</a>
<a href="cleargames.jsp">Clear Games</a>
</body>
</html>
